/**
 * 一个模块的主控界面的容器，用来安放各个模块控件以及协调他们之间的关系 
 */
Ext.define('app.view.module.Module', {

	extend: 'Ext.panel.Panel',
	
	alias: 'widget.modulepanel',
	
	requires: [
		'app.view.module.ModuleController',
		'app.view.module.ModuleModel',
		'app.view.module.factory.ModelFactory'
	],
	
	uses: [
		'app.view.module.region.Navigate',
		'app.view.module.region.Grid',
		'app.view.module.region.Detail',
		'app.view.module.window.BaseWindow'
	],
	
	controller: 'module',
	
	viewModel: {
		type: 'module'
	},
	
	bind: {
		//glyph: '{tf_glyph}', //这一个绑定是无效的，在tabPanel渲染过后，再修改这个值，将不会有任何效果。
		title: '{tf_title}' // 这个绑定是有效的，可以根据ModuleModel中的值来设置title  
	},
	
	layout: 'border',
	
	initComponent: function() {
		this.glyph = this.getViewModel().get('tf_glyph'); // 由于上面的glyph的bind无效，因此需要在这里加入glyph的设置
		
		//根据modelFactory创建model，并且创建一个Store,使用了自动生成的model.
		this.model = app.view.module.factory.ModelFactory.getModelByModule(this.getViewModel());
		console.log(this.model);  
		
		this.store = Ext.create('Ext.data.Store', {
		
			model: this.model,
			autoLoad: true,
			autoSync : true, //修改完一个单元格后会自动保存数据
			proxy: {
				type: 'localstorage', //由于现在还没有和后台建立关系，因此先把数据存在本地数据中
				id: 'module' + '__' + this.getViewModel().get('tf_moduleName')
			}
		});
		
		this.items = [{  
			xtype : 'navigate', // 导航区域  
			region : 'west',  
			width : 250,  
			collapsible : true,  
			split : true  
		}, {  
			xtype : 'modulegrid', // 模块的grid显示区域  
			region : 'center',
			store: this.store //将创建的store传给grid

		}, {  
            xtype : 'recorddetail', // 记录明细  
            region : 'east',  
            width : 250,  
            collapsible : true, // 可以折叠隐藏  
            collapseMode : 'mini', // 折叠陷藏模式  
            split : true  
            // 可以拖动大小  
    	}]; 
		
		this.callParent();
	}
}); 